<template>
  <view class="top-comment">
    <view class="public-content">
      <top-nav-bar backgroundColor="transparent" />
      <view class="public-title">
        {{ $t('nav.title19') }}
      </view>

      <view
        v-for="(item, index) in topList"
        :key="index"
        class="top-list">
        <view class="row">
          <view class="left-box">
            <text>0{{ index + 1 }}</text>
            <text>{{ item.name }}</text>
          </view>
          <image
            :src="`/static/user-guider/top${index + 1}.svg`"
            class="icon"></image>
        </view>
      </view>

      <view
        v-for="(item, index) in listData"
        :key="index"
        class="list-box">
        <view class="top-title">
          <view
            :style="{ background: item.bg }"
            class="right-box">
            <image
              :src="`/static/user-guider/icon${item.icon}.svg`"
              class="icon-box" />
          </view>
          <view class="left-box">
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view
          v-for="(d, i) in item.child"
          :key="i"
          class="desc-text">
          • {{ d }}
        </view>
      </view>

      <view class="bottom-btn">
        <button @click="onOpenChat">
          {{ $t('customer.title') }}
        </button>
      </view>

      <view class="botton-desc">
        <view class="text">
          • {{ $t('user.guide.name7') }}
          <text @click="onOpenChat"> {{ $t('user.guide.name7-1') }} </text>
        </view>
        <view class="text"> • {{ $t('user.guide.name8') }} </view>
        <view class="text"> • {{ $t('user.guide.name9') }} </view>
      </view>
    </view>
    <foot-page />
  </view>
</template>

<script setup>
  import { useChat } from '@/hooks/useChat'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()
  const { onOpenChat } = useChat()
  const topList = [
    { name: t('user.guide.top1'), icon: '' },
    { name: t('user.guide.top2'), icon: '' },
    { name: t('user.guide.top3'), icon: '' },
    { name: t('user.guide.top4'), icon: '' },
    { name: t('user.guide.top5'), icon: '' }
  ]
  const listData = [
    // {
    //   name: t('user.guide.name1'),
    //   icon: '1',
    //   bg: 'linear-gradient( 180deg, #5BDEF8 0%, #13ADEF 100%)',
    //   child: [t('user.guide.name1-1'), t('user.guide.name1-2'), t('user.guide.name1-3')]
    // },
    {
      name: t('user.guide.name2'),
      icon: '8',
      bg: 'linear-gradient( 180deg, #6EF5D7 0%, #22DBA5 100%)',
      child: [t('user.guide.name2-1')]
    },
    {
      name: t('user.guide.name3'),
      icon: '2',
      bg: 'linear-gradient(rgb(235 110 245) 0%, rgb(62 34 219) 100%)',
      child: [t('user.guide.name3-1'), t('user.guide.name3-2')]
    },
    {
      name: t('user.guide.name4'),
      icon: '6',
      bg: 'linear-gradient( 180deg, #F9C249 0%, #E5923D 100%)',
      child: [t('user.guide.name4-1'), t('user.guide.name4-2')]
    },
    {
      name: t('user.guide.name5'),
      icon: '3',
      bg: 'linear-gradient( 180deg, #5B8FF8 0%, #136BEF 100%)',
      child: [t('user.guide.name5-1'), t('user.guide.name5-2')]
    },
    {
      name: t('user.guide.name6'),
      icon: '7',
      bg: 'linear-gradient( 180deg, #7A5BF8 0%, #9E13EF 100%)',
      child: [t('user.guide.name6-1'), t('user.guide.name6-2'), t('user.guide.name6-3')]
    }
    // { name: '07.确认合同', icon: '4', bg: 'linear-gradient( 180deg, #F85B80 0%, #EF5513 100%)' },
    // {
    //   name: '08.正在验收放款中',
    //   icon: '5',
    //   bg: 'linear-gradient( 180deg, #34C9BF 0%, #13EFDD 100%)'
    // }
  ]
</script>

<style lang="scss" scoped>
  .top-comment {
    background: url('/static/bg/bg-top.png') no-repeat top center, #e2ecf8;
    background-size: 100%;
  }

  .public-content {
    padding-bottom: 10rpx;
  }

  .list-box {
    margin-top: 40rpx;
    width: 100%;
    background: #fff;
    border-radius: 30rpx;
    padding: 20rpx 0 40rpx;
    .desc-text {
      padding: 30rpx 40rpx 0 40rpx;
      line-height: 38rpx;
      color: #333;
      font-size: 30rpx;
    }

    .top-title {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      .left-box {
        display: flex;
        margin-left: 20rpx;
        text {
          font-weight: 700;
          font-size: 36rpx;
        }
      }

      .right-box {
        width: 52rpx;
        height: 52rpx;
        border-radius: 52rpx;
        margin-left: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon-box {
          width: 26rpx;
          height: 26rpx;
        }
      }
    }
  }

  .bottom-btn {
    width: 100%;
    margin-top: 40rpx;
    background: #e2ecf8;

    button {
      height: 100rpx;
      line-height: 100rpx;
      background: #3462fe;
      border-radius: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

  .botton-desc {
    margin-top: 40rpx;
    .text {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #333;
      line-height: 40rpx;
      line-height: 38rpx;
      text {
        color: #1261c9;
      }
    }
  }

  .top-list {
    width: 100%;
    background: #fff;
    margin-top: 30rpx;
    border-radius: 30rpx;
    .row {
      padding: 30rpx 40rpx;
      display: flex;
      justify-content: space-between;
      .left-box {
        display: flex;
        align-items: center;
        text {
          font-size: 34rpx;
          color: #333;
          font-weight: 700;
          &:first-child {
            color: #000;
            font-size: 40rpx;
            margin-right: 50rpx;
          }
        }
      }
      .icon {
        width: 58rpx;
        height: 58rpx;
      }
    }
  }
</style>
